<!DOCTYPE html>
<html>
<head>
    <title>会员列表</title>
    <!--#include("../common/common-link.html"){}-->
    <style type="text/css">
        .layui-form-switch{margin-top: 0;}
        .table-panel .conditions .col .input-group{width:320px;}
        .table-panel .conditions .col .type-input-group{width:160px;}
        .table-panel .conditions .col .type-input-group .addon{background-color: #5cb85c;border-color: #4cae4c;color: #fff;}
        .table-panel .conditions .col .type-input-group .type-input-group-btn{width:90px;}
        .table-panel .conditions .col .type-input-group .type-input-group-btn .btn-success{border-left-color: #2cae4c}
        .table-panel .conditions .col .status{width:103px;}
        .table-panel .conditions .col .ok-btn{width:90px;}
        .table-panel .table-content .operation .btn{width:89px;}
        .detail-div{padding:10px 0;}
        .detail-row{text-align: center;height: 29px;line-height: 29px;}
        .detail-row .col{display: inline-block;}
        .detail-row .col-l{font-size: 16px;width:90px;text-align:right;}
        .detail-row .col-r{font-size: 14px;color:#555;width:210px;text-align:left;}
    </style>
</head>
<body>
<div id="container-wrap" style="display:none;">
    <div class="table-panel">
        <div class="header">
            <h4 class="title">条件筛选</h4>
        </div>
        <div class="conditions">
            <div class="col">
                <div class="input-group">
                    <span class="input-group-addon addon">会员名</span>
                    <input type="text" class="form-control" :value="form.name" v-model="form.name">
                </div>
            </div>
            <div class="col">
                <div class="input-group">
                    <span class="input-group-addon addon">手机号</span>
                    <input type="text" class="form-control" :value="form.phone" v-model="form.phone">
                </div>
            </div>
            <div class="col">
                <div class="input-group" style="width:366px">
                    <span class="input-group-addon addon">邮&emsp;箱</span>
                    <input type="text" class="form-control" :value="form.email" v-model="form.email">
                </div>
            </div><br>
            <div class="col" style="margin-right:0;">
                <div class="input-group time">
                    <span class="input-group-addon">注册开始时间</span>
                    <input type="text" id="begin_create_time" class="form-control" readonly :value="form.beginCreateTime" v-model="form.beginCreateTime">
                </div>
            </div>
            <div class="col" style="margin-right:0;height:33px;line-height: 33px;">-</div>
            <div class="col">
                <div class="input-group time">
                    <span class="input-group-addon">注册结束时间</span>
                    <input type="text" id="end_create_time" class="form-control" readonly :value="form.endCreateTime" v-model="form.endCreateTime">
                </div>
            </div>
            <div class="col">
                <div class="input-group type-input-group">
                    <span class="input-group-addon addon">会员状态</span>
                    <div class="input-group-btn type-input-group-btn">
                        <button type="button" class="status btn btn-success dropdown-toggle" data-toggle="dropdown">
                            <span class="type-txt">{{statusTxt}}&nbsp;&nbsp;</span><span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-right">
                            <li><a href="javascript:void(0)" @click="statusSelect(-1)">全部</a></li>
                            <li><a href="javascript:void(0)" @click="statusSelect(1)">活动</a></li>
                            <li><a href="javascript:void(0)" @click="statusSelect(0)">冻结</a></li>
                        </ul>
                    </div>
                </div>
            </div><br>
            <div class="col" style="margin-right:0;">
                <div class="input-group time">
                    <span class="input-group-addon">关注商铺</span>
                    <input type="text" id="begin_expire_time" class="form-control" readonly :value="form.beginExpireTime" v-model="form.beginExpireTime">
                </div>
            </div>
            <div class="col" style="margin-right:0;height:33px;line-height: 33px;"></div>
            <div class="col" style="margin-right:330;height:33px;line-height: 33px;"/>
            <div class="col">
                <input class="btn btn-primary ok-btn" type="button" value="查&emsp;询" @click="query">
                <input class="btn btn-primary ok-btn" type="button" value="重&emsp;置" @click="reset">
            </div>
        </div>
        <div class="header">
            <h4 class="title">会员列表</h4>
        </div>
        <div class="content">
            <table class="table-content">
                <tr>
                    <th width="5%">序号</th>
                    <th width="12%">注册手机</th>
                    <th width="15%">注册邮箱</th>
                    <th width="10%">会员名称</th>
                    <th width="13%">注册时间</th>
                    <th width="27%">关注商铺</th>
                    <th width="8%">当前状态</th>
                    <th width="10%">操作</th>
                </tr>
                <template v-if="users&&users.length>0">
                    <tr v-for="(user,index) in users">
                        <td>{{index+1}}</td>
                        <td>{{user.phone}}</td>
                        <td>{{user.email}}</td>
                        <td>{{user.name}}</td>
                        <td>{{user.createTime}}</td>
                        <td>{{user.followShop}}</td>
                        <td>
                            <div class="layui-form" v-if="user.status">
                                <div :id="'switch'+index" class="layui-unselect layui-form-switch layui-form-onswitch" lay-skin="_switch" :data-index="index"><em>活动</em><i></i></div>
                            </div>
                            <div class="layui-form" v-else>
                                <div :id="'switch'+index" class="layui-unselect layui-form-switch" lay-skin="_switch" :data-index="index"><em>冻结</em><i></i></div>
                            </div>
                        </td>
                        <td class="operation">
                            <input class="btn btn-primary btn-sm" type="button" value="查看详情" @click="detail(user.id)">
                        </td>
                    </tr>
                </template>
                <template v-else>
                    <tr>
                        <td colspan="8">没有会员列表</td>
                    </tr>
                </template>
            </table>
        </div>
    </div>
    <div class="detail-div" style="display:none">
        <div class="detail-row">
            <div class="col col-l">会员id：</div>
            <div class="col col-r">{{user.id}}</div>
        </div>
        <div class="detail-row">
            <div class="col col-l">手机号：</div>
            <div class="col col-r">{{user.phone}}</div>
        </div>
        <div class="detail-row">
            <div class="col col-l">邮箱：</div>
            <div class="col col-r">{{user.email}}</div>
        </div>
        <div class="detail-row">
            <div class="col col-l">会员名称：</div>
            <div class="col col-r">{{user.name}}</div>
        </div>
        <div class="detail-row">
            <div class="col col-l">注册时间：</div>
            <div class="col col-r">{{user.createTime}}</div>
        </div>
        <div class="detail-row">
            <div class="col col-l">关注商铺：</div>
            <div class="col col-r">{{user.followShop}}</div>
        </div>
        <div class="detail-row">
            <div class="col col-l">状态：</div>
            <div class="col col-r">
                <span v-if="user.status">活动</span>
                <span v-else>冻结</span>
            </div>
        </div>
    </div>
    <div id="page"></div>
</div>
</body>
<script type="text/javascript">
    var data = {};
    var vue = {};
    var form = {};
    vue.initialize = function() {
        data.form = form;
        form.phone = "";
        form.name = "";
        form.email = "";
        form.beginCreateTime = "";
        form.endCreateTime = "";
        form.status = "";
        form.pageSize=10;
        data.statusTxt = "全部";
        data.user={};
        data.users=[];
        new Vue({
            el:"#container-wrap",
            data:data,
            methods:vue
        });
        vue.request();
        Vue.nextTick(function() {
            bindEvent();
            $("#container-wrap").show();
        });
    };
    vue.query=function(){
        vue.resetQuery();
        vue.request();
    };
    vue.request = function() {
        var load_id = util.load();
        util.syncPost({
            url:"/shopMember/list",
            data:form,
            success : function(result) {
                $.extend(data, result);
                Vue.nextTick(function() {
                    bindSwitch();
                    vue.page();
                });
            },
            complete : function() {
                layer.close(load_id);
            }
        });
    };
    vue.detail = function(id) {
        var load_id = util.load();
        util.post({
            url:"/shopMember/detail",
            data:{id:id},
            success : function(result) {
                Vue.set(data,'user',result);
                vue.popDetail();
            },
            complete : function() {
                layer.close(load_id);
            }
        });
    };
    vue.popDetail=function(){
        layer.open({
            type: 1,
            shift:2,
            shadeClose:false,
            closeBtn:1,
            area:['360px','390px'],
            title:"会员详情",
            content : $(".detail-div")
        });
    };
    vue.statusSelect = function(status) {
        if (status == '-1') {
            data.statusTxt = "全部";
            data.form.status = "";
        } else if (status == '1') {
            data.statusTxt = "活动";
            data.form.status = status;
        } else if (status == '0') {
            data.statusTxt = "冻结";
            data.form.status = status;
        }
    };
    vue.page = function() {
        util.laypage({
            elem : 'page',
            count : data.totalRecord,
            limit : form.pageSize,
            curr : form.currentPageIndex,
            jump : function(obj, first) {
                form.currentPageIndex = obj.curr;
                if (!first) {
                    form.pageSize=obj.limit;
                    vue.request();
                }
            }
        });
    };
    vue.reset = function() {
        util.reset(form);
        data.statusTxt = "全部";
    };
    vue.resetQuery=function(){
        form.currentPageIndex=1;
    };
    function bindEvent(){
        util.laydate({
            elem : '#begin_create_time',
            done: function(time, date, endDate){
                form.beginCreateTime = time;
            }
        });
        util.laydate({
            elem : '#end_create_time',
            done: function(time, date, endDate){
                form.endCreateTime = time;
            }
        });

    };
    function bindSwitch(){
        var users=data.users;
        for(var i in users){
            var user=users[i];
            $("#switch"+i).click(processSwitch);
        }
    };
    function processSwitch(event){
        var target=event.currentTarget;
        var $target=$(target);
        var dataset=target.dataset;
        var index=dataset.index;
        var user=data.users[index];
        var id=user.id;
        var state=user.status;
        if(!state){
            user.status=1;
            util.confirm("确认修改为活动状态？",function(){
                modify(index,id,1);
            },function(){
                user.status=0;
            });
        }else{
            user.status=0;
            util.confirm("确认冻结该用户？",function(){
                modify(index,id,0);
            },function(){
                user.status=1;
            });
        }
    };
    function modify(index, id, status) {
        var _form = {};
        _form.id = id;
        _form.status = status;
        var load_id = util.load();
        util.post({
            url : "/shopMember/updateStatus",
            data : _form,
            success : function(result) {
                layer.close(load_id);
                var user = data.users[index];
                user.status = status;
                layer.msg('操作成功', {icon:1,time:1000});
            },
            complete : function() {
                layer.close(load_id);
            }
        });
    };
    function initialize(){
        layui.use(['laydate','laypage'], function(){
            laydate = layui.laydate;
            laypage = layui.laypage;
            vue.initialize();
        });
    };
</script>
</html>